<template>
  <div>
    <div style="position: relative; height: 500px; width: 890px">
      <div id="main"></div>
    </div>
  </div>
</template>
<script>
import City from '@/utils/City'

export default {
  props: {
    provinces: {
      type: Array,
      default() {
        return {}
      }
    }
  },
  watch: {
    provinces: {
      handler() {
        this.getMap()
      },
      deep: true
    }
  },
  data() {
    return {

      symbolUrl: require("../../assets/images/header/u1192.png"),
      //根据区划做索引
      city: {
        甘肃省: 620000,
        兰州市: 620100,
        嘉峪关市: 620200,
        酒泉市: 620900,
        张掖市: 620700,
        金昌市: 620300,
        武威市: 620600,
        白银市: 620400,
        定西市: 621100,
        天水市: 620500,
        平凉市: 620800,
        庆阳市: 621000,
        陇南市: 621200,
        临夏回族自治州: 622900,
        甘南藏族自治州: 623000,
        // 各县
        城关区: 620102,
        七里河区: 620103,
        西固区: 620104,
        安宁区: 620105,
        红古区: 620111,
        永登县: 620121,
        皋兰县: 620122,
        榆中县: 620123,
        市辖区: 620200,
        金川区: 620302,
        永昌县: 620321,
        白银区: 620402,
        平川区: 620403,
        靖远县: 620421,
        会宁县: 620422,
        景泰县: 620423,
        秦州区: 620502,
        麦积区: 620503,
        清水县: 620521,
        秦安县: 620522,
        甘谷县: 620523,
        武山县: 620524,
        张家川回族自治县: 620525,
        凉州区: 620602,
        民勤县: 620621,
        古浪县: 620622,
        天祝藏族自治县: 620623,
        甘州区: 620702,
        肃南裕固族自治县: 620721,
        民乐县: 620722,
        临泽县: 620723,
        高台县: 620724,
        山丹县: 620725,
        崆峒区: 620802,
        泾川县: 620821,
        灵台县: 620822,
        崇信县: 620823,
        庄浪县: 620825,
        静宁县: 620826,
        华亭市: 620881,
        肃州区: 620902,
        金塔县: 620921,
        瓜州县: 620922,
        肃北蒙古族自治县: 620923,
        阿克塞哈萨克族自治县: 620924,
        玉门市: 620981,
        敦煌市: 620982,
        西峰区: 621002,
        庆城县: 621021,
        环县: 621022,
        华池县: 621023,
        合水县: 621024,
        正宁县: 621025,
        宁县: 621026,
        镇原县: 621027,
        安定区: 621102,
        通渭县: 621121,
        陇西县: 621122,
        渭源县: 621123,
        临洮县: 621124,
        漳县: 621125,
        岷县: 621126,
        武都区: 621202,
        成县: 621221,
        文县: 621222,
        宕昌县: 621223,
        康县: 621224,
        西和县: 621225,
        礼县: 621226,
        徽县: 621227,
        两当县: 621228,
        临夏市: 622901,
        临夏县: 622921,
        康乐县: 622922,
        永靖县: 622923,
        广河县: 622924,
        和政县: 622925,
        东乡族自治县: 622926,
        积石山保安族东乡族撒拉族自治县: 622927,
        合作市: 623001,
        临潭县: 623021,
        卓尼县: 623022,
        舟曲县: 623023,
        迭部县: 623024,
        玛曲县: 623025,
        碌曲县: 623026,
        夏河县: 623027,
      },
      queryName: '甘肃省',
      // 上钻的
      cityOver: ["甘肃省"],
      //指示点数据
      symbolData: [],
    };
  },
  mounted() {
    this.getJson(this.queryName);
  },
  methods: {
    async getJson(name) {
      // 地图的坐标信息
      var geoCoordMap = City
// 数据信息
//       var BJData = this.provinces.filter(item => item.value > 0).map(item => {
//         return [{
//           name: '酒泉',
//         },
//           {
//             name: item.name,
//             value: item.value
//           }]
//       })

      var BJData = [
        [{name:'兰州',value:3004},{name:'定西',value:3004}],
        [{name:'嘉峪关',value:5553},{name:'定西',value:5553}],
        [{name:'金昌',value:529},{name:'定西',value:529}],
        [{name:'白银',value:529},{name:'定西',value:529}],
        [{name:'天水',value:27},{name:'定西',value:27}],
        [{name:'武威',value:859},{name:'定西',value:859}],
        [{name:'张掖',value:154},{name:'定西',value:154}],
        [{name:'定西',value:345},{name:'定西',value:345}],
        [{name:'陇南',value:211},{name:'定西',value:211}],
        [{name:'平凉',value:236},{name:'定西',value:236}],
        [{name:'庆阳',value:127},{name:'定西',value:127}],
        [{name:'临夏回族自治州',value:341},{name:'定西',value:341}],
        [{name:'甘南州',value:154},{name:'定西',value:154}],
        [{name:'酒泉',value:127993},{name:'定西',value:127993}],

      ];
      const {data: res} = await this.$axios.get(
          "/static/js/62/" + this.city[name] + ".json"
      );
      let cityName = [];
      res.features.forEach((item) => {

        let tmp = {
          name: item.properties.name,
          //cp字段确定散点图定位
          value: item.properties.cp,
        };

        cityName.push(tmp);
      });
      this.symbolData = cityName;

      this.$echarts.registerMap(name, res);
      // var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705'
      var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

      var convertData = function (data) {
        // data BJData
        var res = []
        for (var i = 0; i < data.length; i++) {
          // BJData
          var dataItem = data[i]
          var fromCoord = geoCoordMap[dataItem[0].name] // 酒泉
          var toCoord = geoCoordMap[dataItem[1].name] // 成都
          if (fromCoord && toCoord) {
            res.push([{
              coord: toCoord,
              value: dataItem[1].value
            }, {
              coord: fromCoord
            }])
          }
        }
        return res
      }

      var series = [];
      [
        ['兰州', BJData],
      ].forEach(function (item) {

        series.push({
          // 设置飞机后的烟雾
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
          },
          // 线宽
          lineStyle: {
            normal: {
              color: '#fff',
              width: 0,
              curveness: 0.2
            }
          },
          data: convertData(item[1]) // 坐标
        }, {
          name: '劳务传输',
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,

          },
          lineStyle: {
            normal: {
              color: function (params) {
                if (params.value > 0 && params.value <= 1) {
                  return '#ffe566'
                } else if (params.value === 2) {
                  return '#74ebd5'
                } else if (params.value > 2 && params.value < 4) {
                  return '#5bc0eb'
                } else {
                  return '#f26419'
                }
              },
              width: 1,
              opacity: 0.4,
              curveness: 0.2
            }
          },
          data: convertData(item[1])
        }, {
          // 设置圆圈属性的
          name: item[0] + '',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          // 鼠标移入显示的东西
          tooltip: {

            showDelay: 0,

            formatter: function (params) {
              return `
${params.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>输转人数:
        <span">${params.value[2]}人</span>`
            },

            axisPointer: {

              show: true,

              type: 'cross',

              lineStyle: {

                type: 'dashed',

                width: 1

              }

            }

          },
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          // 设置圆圈大小
          symbolSize: function (val) {
            // val的值是data的值
            return 10
          },
          itemStyle: {
            normal: {
              color: function (params) {
                if (params.value[2] > 0 && params.value[2] <= 1) {
                  return '#ffe566'
                } else if (params.value[2] === 2) {
                  return '#74ebd5'
                } else if (params.value[2] > 2 && params.value[2] < 4) {
                  return '#5bc0eb'
                } else {
                  return '#f26419'
                }
              }
            }
          },
          data: item[1].map(function (dataItem) {
            return {
              name: dataItem[0].name+"(输转人数:"+dataItem[0].value+")",
              value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
            }
          })
        })
      })

      const option = {
        // 设置为半透明
        backgroundColor: 'transparent',
        title: {
          left: 'left',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        // 设置地图默认大小
        geo: {
          zoom: 1.2,
          map: name,
          label: {
            normal: {
              show: false,
              color: '#fff'
            },
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              // 设置区域颜色
              areaColor: 'rgba(237,242,244,0.06)',
              // 设置边框颜色
              borderColor: '#10beae'
            },
            emphasis: {
              // 设置鼠标悬停时候的样式
              areaColor: '#c6c2c2'
            }
          }
        },


        series: series
      }
      this.$echarts.init(document.getElementById('main')).setOption(option)


      // this.drawChart(name, cityName);
    },

    drawChart(name, dataName) {
      var chartDom = document.getElementById("main");
      this.$echarts.dispose(chartDom);
      var myChart = this.$echarts.init(chartDom);
      var that = this;
      var option;
      option = {
        grid: {
          zlevel: -1,
          z: -1,
        },
        tooltip: {
          show: false,
        },
        geo: {
          type: "map",
          map: name,
          roam: true,
          showLegendSymbol: false,
          label: {
            show: true,
            color: "#ffffff",
          },
          data: dataName,
          itemStyle: {
            normal: {
              //未选中样式
              //背景颜色
              areaColor: "#0D2464",
              //边框颜色
              borderColor: "#0B457A",
              color: "#ffffff",
              //边框宽度
              borderWidth: 1,
            },
            emphasis: {
              // 选中样式
              borderWidth: 1,
              //高亮颜色
              areaColor: "#46A9FF",
              label: {
                //显示文字
                show: true,
                color: "#ffffff",
                textStyle: {
                  //鼠标移入的字体颜色
                  color: "#ffffff",
                },
              },
            },
          },
        },
        series: [
          //散点图根据json文件中的‘cp’字段对应坐标做定位（配合上一篇爬取json文件食用最佳）
          {
            name: "pm2.5",
            type: "scatter",
            symbol: "image://" + this.symbolUrl,
            symbolSize: 20,
            symbolOffset: [0, "80%"],
            center: [99.7129, 38.166],
            coordinateSystem: "geo",
            data: dataName,
            encode: {
              value: 2,
            },
            label: {
              position: "right",
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            itemStyle: {
              color: "rgb(128, 128, 128)",
            },
            legendHoverLink: true,
          },
        ],
      };
      // myChart.setOption(option,true);
      // myChart.on("click", function (params) {
      //   //   点击下钻
      //   if (params.componentType == "geo") {
      //     that.queryName = params.name;
      //     if (that.cityOver.indexOf(that.queryName) == -1) {
      //       that.cityOver.push(params.name);
      //     }
      //     that.getJson(that.queryName);
      //   }
      //   // 散点图点击事件
      //   // else if (params.componentSubType == "scatter") {
      //   // }
      // });

      //   点击空白上钻
      // myChart.getZr().on("click", function (params) {
      //   if (params.target) {
      //   } else {
      //     if (that.cityOver.length > 1) {
      //       that.queryName = that.cityOver[that.cityOver.length - 2];
      //       that.cityOver.pop();
      //     } else {
      //       that.queryName = that.cityOver[0];
      //     }
      //
      //     that.getJson(that.queryName);
      //   }
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

#main {
  height: 500px;
  width: 890px;
  //   background-color: pink;
}
</style>
